<template>
	<view class="meeting-stat">
		<view class="title-box">
			<view class="title">
				{{title}}
			</view>
			<view class="cont">
				<!-- 报名总数:0 签到人数:0 报名公司数:1 签到公司数:0 -->
				报名总数:{{actNum.numberOfEnrolment}} 签到人数:{{actNum.numberOfSignIn}} 报名公司数:{{actNum.numberOfCompany}} 签到公司数:{{actNum.numberOfSignStatus}}
			</view>
		</view>
		<bs-gap top="0" bottom="0"></bs-gap>
		<scroll-view scroll-x="true" style="width: 100%;">
			<view>
				<view class="thead">
					<view class="th">
						报名人
					</view>
					<view class="th">
						手机号
					</view>
					<view class="th">
						单位名称
					</view>
					<view class="th">
						参会人
					</view>
					<view class="th">
						参会人手机号
					</view>
					<view class="th">
						签到状态
					</view>
					<view class="th">
						缴费类型
					</view>
					<view class="th">
						缴费状态
					</view>
				</view>
				<view class="tbody" v-for="item in tickList">
					<view class="td">
						{{item.persionName}}
					</view>
					<view class="td">
						{{item.payPhone}}
					</view>
					<view class="td">
						{{item.companyName}}
					</view>
					<view class="td">
						{{item.payName}}
					</view>
					<view class="td">
						{{item.payPhone}}
					</view>
					<view class="td">
						{{scope.row.signStatus?'已签到':'未签到'}}
					</view>
					<view class="td">
						{{scope.row.payType==1?'线下':'线上'}}
					</view>
					<view class="td">
						{{scope.row.payStatus?'已缴费':'未缴费'}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			activityId: {
				type: [String, Number],
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			tickList: {
				type: Array,
				default: () => []
			},
			actNum: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {};
		},
		async mounted() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.meeting-stat {
		.thead {
			padding: 24rpx 0;
			@include my-flex($jc: $bs-sb, $ai:center, $fw:nowrap);
			width: 100%;

			.th {
				color: #303030;
				font-size: 30rpx;
				width: 180rpx;
				min-width: 180rpx;
				text-align: center;
			}
		}

		.tbody {
			@include my-flex($jc: $bs-sb, $ai:center, $fw:nowrap);
			width: 100%;

			.td {
				color: #666666;
				font-size: 26rpx;
				width: 180rpx;
				min-width: 180rpx;
				padding: 20rpx 0;
				text-align: center;
			}
		}

		.tbody:nth-child(even) .td {
			width: 100%;
			background-color: #fff;
		}

		.tbody:nth-child(odd) .td {
			width: 100%;
			background-color: #f7f7f7;
		}

		.title-box {
			padding: 40rpx 30rpx;
		}

		.title {
			font-size: 40rpx;
			color: #303030;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.cont {
			font-size: 24rpx;
			color: #999;
		}
	}
</style>
